<template>
  <div class="h-full overflow-y-auto">
    <div class="card">
      <PageHeader class="p10 border-bottom">
        <div class="flex_aic">
          <div class="fs-14 font-600">{{ t("member.交易总览") }}</div>
        </div>
      </PageHeader>
      <div class="flex gap-20 w-full p20">
        <div
          class="flex1 color-white base-card"
          v-for="(item, index) in baseData"
          :key="item.name"
        >
          <div class="flex_aic_jcsb">
            <div>{{ item.name }}</div>
            <el-dropdown
              @command="(val) => handleDateTypeCommand(val, item, index)"
              v-if="item.dateType"
            >
              <div class="color-white">
                {{ getDateTypeLabel(item.dateType) }}
                <el-icon><CaretBottom /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="item in dateTypeOptions"
                    :key="item.value"
                    :command="item.value"
                    >{{ item.label }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="fs-30 font-bold mt36 splitLIne pb8">
            {{ item.value }}
          </div>
          <div class="mt8 flex_aic" v-if="item.tb">
            <span>{{ t("member.较上期") }}</span>
            <span class="ml8 flex_aic">
              {{ item.tb }}%
              <el-icon :size="16">
                <Top v-if="item.tb > 0" />
                <Bottom v-else />
              </el-icon>
            </span>
          </div>
        </div>
      </div>
    </div>

    <div class="card mt10">
      <PageHeader class="p10 border-bottom">
        <div class="flex_aic">
          <div class="fs-14 font-600">{{ t("member.变化趋势") }}</div>
        </div>
        <template #right>
          <DatePick class="ml20" v-model="dateRange" @change="getVipTrend" />
        </template>
      </PageHeader>
      <div class="mt20 ml20 flex_aic">
        <div class="mr12">{{ t("member.筛选项") }}</div>
        <el-radio-group v-model="dataType" size="small" @change="initChart1">
          <el-radio
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </div>
      <div style="width: 100%; height: 458px" id="chart1"></div>
    </div>

<!--    <div class="flex mt10 gap-10">
      <div class="card2">
        <PageHeader
          class="border-bottom p10"
          :title="`${t('member.会员偏好商品排行')} - ${t('member.TOP10')}`"
        >
          <template #right>
            <DatePick
              class="ml20"
              v-model="dateRange"
              @change="getVipSkuTop10"
            />
          </template>
        </PageHeader>
        <el-table
          :data="tableData"
          style="width: 100%"
          class="cover-table"
          border
        >
          <el-table-column type="index" :label="t('member.序号')" width="80" />
          <el-table-column
            :prop="`skuName${locale}`"
            :label="t('member.商品名称')"
          />
          <el-table-column
            prop="collectVipCount"
            :label="t('member.商品收藏数')"
            sortable
          />
          <el-table-column
            prop="saleCount"
            :label="t('member.支付订单数')"
            sortable
          />
        </el-table>
      </div>
      <div class="card2">
        <PageHeader
          class="border-bottom p10"
          :title="t('member.支付客单价变化趋势')"
        >
          <template #right>
            <DatePick class="ml20" v-model="dateRange2" @change="getSalePerAmountTrent"/>
          </template>
        </PageHeader>
        <div class="p10">
          <div id="chart2" style="width: 100%; height: 458px"></div>
        </div>
      </div>
    </div>-->

    <!-- <div class="card mt10">
      <PageHeader class="p10 border-bottom">
        <div class="flex_aic">
          <div class="fs-14 font-600">{{ t('member.会员报表') }}</div>
        </div>
        <template #right>
          <el-button type="primary" size="small">
            <SvgIcon name="iconziyuan23" color="#fff" />
            <span class="ml4">{{ t('member.导出报表') }}</span>
          </el-button>
        </template>
      </PageHeader>

      <div class="p10">
        <el-tabs v-model="tabName" type="card" size="small">
          <el-tab-pane :label="t('member.按天')" name="1">
            <Table1 />
          </el-tab-pane>
          <el-tab-pane :label="t('member.按人')" name="2">
            <Table2 />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div> -->
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import { useI18n } from "vue-i18n";
import { CaretBottom } from "@element-plus/icons-vue";
import moment from "moment";
import * as echarts from "echarts";
import DatePick from "@/components/datePick.vue";
import initChart from "@/utils/chart";
import Table1 from "./components/table1.vue";
import Table2 from "./components/table2.vue";
import Api from "@/config/api/api";

const { t, locale } = useI18n();

const tabName = ref("1");
const dateRange = ref(moment().format("YYYY-MM-DD"));
const dateRange2 = ref(moment().format("YYYY-MM-DD"));
const baseData = ref([
  {
    name: t("member.会员总数"),
    value: 0,
    key: "vipCount",
    dateType: "1",
  },
  {
    name: t("member.新增会员数"),
    value: 0,
    dateType: "1",
    key: "vipCreateCount",
  },
  {
    name: t("member.支付人数"),
    value: 0,
    dateType: "1",
    key: "saleVipCount",
  },
  {},
]);

const tableData = ref([]);

const dateTypeOptions = ref([
  {
    label: t("member.昨日"),
    value: "1",
  },
  {
    label: t("member.近7天"),
    value: "2",
  },
  {
    label: t("member.近30天"),
    value: "3",
  },
]);

const dataType = ref("1");
const typeOptions = ref([
  {
    label: t("member.新增用户数"),
    value: "1",
    key: "vipCount",
  },
  {
    label: t("member.下单人数"),
    value: "2",
    key: "saleCreateVipCount",
  },
  {
    label: t("member.支付人数"),
    value: "3",
    key: "saleVipCount",
  },
  {
    label: t("member.关注店铺数"),
    value: "4",
    key: "collectVipCount",
  },
]);

const pageInfo2 = ref({
  currentPage: 1,
  pageSize: 10,
  total: 100,
});
const chart1Data = ref([]);

function handleDateTypeCommand(command, item, index) {
  item.dateType = command;
  getSkuSummary(index, item.key, item.dateType);
}

const getDateTypeLabel = (value) => {
  return dateTypeOptions.value.find((item) => item.value === value)?.label;
};
// 近三十天日期
const thirtyDays = Array.from({ length: 30 }, (_, i) =>
  moment()
    .add(i - 29, "day")
    .format("YYYY-MM-DD")
);

//24小时
const twentyFourHours = Array.from({ length: 24 }, (_, i) =>
  moment("00:00", "HH:mm").add(i, "hour").format("HH:mm")
);

const getSkuSummary = (index, key, dateType) => {
  let startDate = "",
    endDate = "";
  if (dateType == "1") {
    startDate = moment().subtract(1, "days").format("YYYY-MM-DD 00:00:00");
    endDate = moment().subtract(1, "days").format("YYYY-MM-DD 23:59:59");
  } else if (dateType == "2") {
    startDate = moment().subtract(6, "days").format("YYYY-MM-DD 00:00:00");
    endDate = moment().format("YYYY-MM-DD 23:59:59");
  } else if (dateType == "3") {
    startDate = moment().subtract(29, "days").format("YYYY-MM-DD 00:00:00");
    endDate = moment().format("YYYY-MM-DD 23:59:59");
  }
  Api.vipSummary({
    startDate,
    endDate,
  }).then((res) => {
    if (res.status == 200) {
      baseData.value[index].value = res.data[key];
    }
  });
};

const getVipTrend = (value, type) => {
  Api.vipTrend({
    startDate: value[0],
    endDate: value[1],
    type: type,
  }).then((res) => {
    chart1Data.value = res.data;
  });
};
const chart1 = null,
  chart2 = null;
const initChart1 = () => {
  const item = typeOptions.value.find((item) => item.value == dataType.value);
  initChart("chart1", chart1, [
    {
      name: item.label,
      data: chart1Data.value?.map((v) => [v.time, v[item.key]]) || [],
      rgb: "33,195,188",
    },
  ]);
};

const getVipSkuTop10 = (value, type) => {
  Api.vipSkuTop10({
    startDate: value[0],
    endDate: value[1],
    type: type,
  }).then((res) => {
    tableData.value = res.data;
  });
};

const getSalePerAmountTrent = (value, type) => {
  Api.salePerAmountTrent({
    startDate: value[0],
    endDate: value[1],
    type: type,
  }).then((res) => {
    initChart(
      "chart2",
      chart2,
      [
        {
          name: t("member.支付客单价"),
          data: res.data.map((v) => [v.time, v.salePerAmount]),
          rgb: "33,195,188",
        },
      ],
    );
  });
};
onMounted(() => {
  /*getVipSkuTop10(
    [
      moment().subtract(1, "days").format("YYYY-MM-DD 00:00:00"),
      moment().subtract(1, "days").format("YYYY-MM-DD 23:59:59"),
    ],
    1
  );*/
  baseData.value.forEach((item, index) => {
    if (item.dateType) {
      getSkuSummary(index, item.key, item.dateType);
    }
  });
  getVipTrend(
    [
      moment().subtract(1, "days").format("YYYY-MM-DD 00:00:00"),
      moment().subtract(1, "days").format("YYYY-MM-DD 23:59:59"),
    ],
    1
  );
  getSalePerAmountTrent([
    moment().subtract(1, "days").format("YYYY-MM-DD 00:00:00"),
    moment().subtract(1, "days").format("YYYY-MM-DD 23:59:59"),
  ], 1);
});

watch(
  () => chart1Data.value,
  () => {
    initChart1();
  },
  {
    deep: true,
  }
);
</script>
<style lang="scss" scoped>
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}
.card {
  background-color: #fff;
  border-radius: 2px;

  .titleBox {
    width: 100px;
    background-color: #fff7f4;
  }
}
.card2 {
  background-color: #fff;
  border-radius: 2px;
  width: calc((100% - 10px) / 2);
  .chart_box {
    height: 458px;
    margin-top: 30px;
  }
}

.base-card {
  height: 163px;
  padding: 12px 30px 12px 2.4%;
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% 100%;

  &:nth-child(1) {
    background-image: url("@/assets/images/statistics/member/bg1.png");
  }
  &:nth-child(2) {
    background-image: url("@/assets/images/statistics/member/bg2.png");
  }
  // &:nth-child(3) {
  //   background-image: url("@/assets/images/statistics/member/bg3.png");
  // }
  &:nth-child(3) {
    background-image: url("@/assets/images/statistics/member/bg4.png");
  }
}

.splitLIne {
  width: 130px;
  border-bottom: 1px solid #ffffff;
}
</style>
